<template>
	<view class="goods">
		<!-- 导航栏 -->
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" :title="titleText"></nav-bars>
		
		<!-- 商品轮播图 -->
		<view class="g_banner">
			<view class="i_tBtn" @click="dviewr()" v-if="cool_show">
				<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
				<view class="i_tbTxt">3D</view>
			</view>
			<swiper @change="changeBanner">
				<swiper-item v-for="item in goodsInfo.roundImgs">
					<image :src=" item.image_path"></image>
				</swiper-item>
			</swiper>
			<view class="g_bDots">
				<view class="g_bDot" :class="{'active': bannerIndex === index}" v-for="(item, index) in goodsInfo.roundImgs">
					<view class="g_bIcon"></view>
				</view>
			</view>
		</view>
		
		<!-- 商品基础信息 -->
		<view class="g_base">
			<view>
				<view class="g_bSell">{{goodsInfo.volume}}人付款</view>
				<view class="g_bPrice"><view class="ledtprei">￥<text>{{goodsInfo.productPrice}}</text></view></view>
			</view>
			<view>
				<view class="g_bShare" @click="is_show_model=true">
					<view class="g_bsIcon"><view class="iconfont icon-share"></view></view>
					<view class="g_bsTxt">分享</view>
				</view>
				<view class="g_bName omit-2">{{goodsInfo.name}}</view>
			</view>
		</view>
		
		<!-- 其他 -->
		<!-- <view class="g_it">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">优惠</view>
					<view class="g_iCont" @click="receive">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">优惠券</view>
					</view>
				</view>
				<view class="g_iItem">
					<view class="g_iLabel">活动</view>
					<view class="g_iCont">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">家居节</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- v-if="goodsInfo.isMoreSize" -->
		<view class="g_it">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">选择</view>
					<view class="g_iCont" @tap="showSizePop">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">规格分类</view>
						<view class="g_iSelect" v-if="goodsInfo && goodsInfo.sku_lst">
							<view style="display: flex; overflow-x: auto; width: 50%;">
								<view style="display: flex;">
									<view class="g_isItem" v-for="(itme,index) in goodsInfo.sku_lst" :class="JSON.stringify(itme.attribute) == JSON.stringify(this.keys) ? 'active':''"><image :src="goodsInfo.main_imgurl"></image></view>
								</view>
							</view>
							<view class="g_isLabel">共有{{goodsInfo.sku_lst.length}}种规格分类可选</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="g_detail">
			<view class="g_dTitle">商品详情</view>
		    <view style="padding: 20rpx 0;" >
				<u-parse :html="details"></u-parse>
				<!-- <rich-text :nodes="details | formatRichText" selectable='true'></rich-text> -->
			</view>
		</view>
		
		<!-- 商品图片列表 -->
		<!-- <view class="g_productshow">
			<view class="g_pItem">
				<image mode="widthFix"></image>
			</view>
		</view> -->
		
		<!-- 固定条 -->
		 <view class="into_shopcart">
				<view class="repbtn" @click="addCart(1)"><text>替换当前套餐商品</text></view>
		</view>
		
		
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
		  <view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
			<view class="md-content">
			  <view class="md-content-item">
				<view class="s_bIcon iconfont icon-friend"></view>
				<view>分享给好友</view>
				<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
			  </view>
			  <view class="md-content-item" @click="sharePoster">
				<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
				<view>生成分享大图</view>
			  </view>
			</view>
			<view class="cancel" @click="is_show_model=false">取消</view>
		  </view>
		</view>
		<qrcode-poster ref="poster" :title="shaegood.product_title"  :subTitle="shaegood.store_name" :primary_price="shaegood.primary_price"  :headerImg="shaegood.main_imgurl" :price="shaegood.price" ></qrcode-poster>
		<!-- 弹窗-分享 -->
		<!-- <view class="g_share" v-if="canvasShow">
			
		</view> -->
		
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop"><view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view></view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="goodsInfo.main_imgurl" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<view class="S_biFee">¥<text>{{goodsInfo.productPrice}}</text></view>
							<view class="S_biTip"><view class="yprice" v-if="goodsInfo.rate_price"><i>底价</i>￥<text>{{goodsInfo.rate_price}}</text></view></view>
							<view class="S_biRemark">所属店铺：{{goodsInfo.store_name}}</view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="s_btit">可选择:</view>
							<view class="S_bc" :class="{active:item.sku_id==Skuid}" v-for="(item,index) in goodsInfo.sku_lst" @click="checkedEvent(item)">
								<text v-for="(items,index) in item.attribute">{{items.value}},</text>{{item.num}}件
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="addCart" style="width: 100%;">替换当前套餐商品</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_product from '@/service/product.js'
import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue'

export default {
	components: { navBar ,QrcodePoster},
	
	data() {
		return {
			product_id: null,
			diy_list_id:'',
			pack_id:'',
			goodsInfo: null,
			bannerIndex: 0,
			// 规格
			sizePop: false,
			sizeImage: null,   // 规格图片
			sizePrice: null,   // 规格价格
			sizeNum: 1,
			// 购物车
			cart: null,
			child:'',
			is_show_model: false,//是否显示分享模态窗
			shaegood:'',
			specif:'',
			html :'',
			sku_id:'',
			keys :[],
			details:'',
			userId :'',
			cool_show:'',
			Skuid:"",
			sharecode:'',
			scrollTop: 0,
			titleText: '',
		}
	},
	
	onLoad(options) {
		this.$utils.getUrl()
		// testcode
		this.product_id = options.product_id
		this.diy_list_id = options.diy_list_id
		this.pack_id = options.pack_id
		this.getData()
		this.shareimg();
		this.userId = uni.getStorageSync('userId')
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		this.scrollTop = scrollTop;
		if (e.scrollTop >= 300) {
			this.titleText = '商品详情';
		} else {
			this.titleText = '';
		}
		// 滑动距离超过用户名 => 显示导航栏
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {}
		return {
		  title: this.goodsInfo.name,
		  path: '/pages_mall/pages/mall/goods_details/goods_details?id=' + this.product_id +'&share_uid='+ this.userId,
		  success: function (res) {
			console.log('成功', res)
		  }
		}  
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText (html) { //控制小程序中图片大小
			let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		}	
	},
	methods: {
        //分享海报
		sharePoster(){
			//获取带参数二维码并传递
			this.is_show_model = false
			this.$refs.poster.showCanvas(this.sharecode)
		},
		shareimg(){
			service_product.goods_getshare({product_id:this.product_id})
				.then(res => {
					if (res.code == 1) {
					  this.shaegood = res.data
					   this.sharecode = res.data.wx_code_url
					}
			})
		},
		// 获取商品数据
		getData() {
			service_product.replaceProductDetail({ product_id: this.product_id ,diy_list_id:this.diy_list_id})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						// 处理数据
						let goodsInfo = {
							// 商品所属店铺信息
							storeId: data.store_id,                // 所属店铺id
							storeName: data.store_name,            // 所属店铺名称
							storeLogo: data.store_logo,            // 所属店铺logo
							// 商品信息
							// 商品价格，只作产品列表产品详情页展示，
							// 实际使用价格：单规格直接取规格数据，多规格根据所选规格变动
							productPrice: data.price,              // 商品价格
							parameter:data.parameter,
							productCostPrice: data.primary_price,  // 商品原价
							product_id: data.product_id,              // 商品id
							name: data.product_title,              // 商品名
							details: data.details,                  // 商品详情
							volume: data.volume,                   // 商品销量
							roundImgs: data.round_imgs,            // 商品图片列表
							// 商品规格信息
							isMoreSize: data.specs_type,           // 是否是多规格商品  1: 单规格（不是） 2：多规格（是）
							sku_lst: data.sku_lst,
							store_name:data.store_name,
							main_imgurl:data.main_imgurl,
							sizeParams: data.parameter,
							rate_price:data.rate_price, //根据权限显示底价
							
							sizeId: null,         // 商品规格id
							price: null,          // 商品价格
							costPrice: null,      // 商品原价
							stockNum: null,       // 商品库存
						}
						this.cool_show = data.cool_show
						goodsInfo.volume = goodsInfo.volume ? goodsInfo.volume : 0
						goodsInfo.isMoreSize = goodsInfo.isMoreSize == 1 ? false : true
						// goodsInfo.sizeParams 
						
						// 多规格
						if (goodsInfo.isMoreSize) {
							this.Skuid = goodsInfo.sku_lst[0].sku_id
						}
						// 单规格
						else {
							goodsInfo.price = goodsInfo.sku_lst[0].price
							goodsInfo.costPrice = goodsInfo.sku_lst[0].primary_price
							goodsInfo.stockNum = goodsInfo.sku_lst[0].num
							goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id
							this.Skuid = goodsInfo.sku_lst[0].sku_id
						}
						this.details = data.details
						this.goodsInfo = goodsInfo
						this.child = goodsInfo.parameter[0].child
					  	  
					}
				})
				.catch(err => {
					
				})
		},
		//选择规格
		checkedEvent(data){
			this.Skuid = data.sku_id
		},
		dviewr(){
			uni.navigateTo({
				url: '/pages_3D/pages/3D/shop?coolid='+ this.goodsInfo.cool_show
			});
		},
		// 替换商品
		addCart(e) {
			let token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}
			if(!this.Skuid){
					uni.showToast({
					    title: '请选择规格',
						icon: 'none',
					    duration: 2000
					});
				return
			}
			service_product.replaceProduct({diy_list_id:this.diy_list_id,sku_id:this.Skuid,product_id:this.product_id,pack_id:this.pack_id})
				.then(res => {
					if (res.code == 1) {
					  uni.showToast({ title: "替换商品成功！", icon: "success" })
					  this.sizePop = false
					}
			})	
		},
	
		// 添加数量
		addSizeCart() {
			this.sizeNum++
		},
		
		// 删减购物车-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--
		},
		
		
		
		// 弹窗-规格
		showSizePop() {
			this.sizeNum = 1
			this.sizePop = true
		},
		hideSizePop() {
			this.sizePop = false
		},
		cartlist(){
			let token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}else{
				uni.navigateTo({ url: "/pages_mall/pages/mall/cart/cart" })
			}
		},
		// 跳转页面
		toPage(page, { storeId } = {}) {
			if (page === 'cart') uni.navigateTo({ url: "/pages_mall/pages/mall/cart/cart" })
			else if (page === 'store') uni.navigateTo({ url: "/pages_mall/pages/mall/store/store?storeId=" + this.goodsInfo.storeId })
		},
		
		// 轮播图内容变动
		changeBanner(e) { this.bannerIndex = e.detail.current },
		
		// 禁止滑动
		moveHandle() {}
	}
}
</script>

<style lang="scss" scoped>
.goods {
	// 商品轮播图
	.g_banner {height: 680rpx;background: #fff;position: relative;
		.g_bDots {width: 100%;position: absolute;bottom: 20rpx;left: 0;display: flex;justify-content: center;}
		.g_bDot {padding: 16rpx 8rpx;
			&.active .g_bIcon {width: 22rpx;border-radius: 10rpx;background: #16181c;}
		}
		.g_bIcon {width: 10rpx;height: 10rpx;border-radius: 50%;background: rgba(26, 28, 32, .4);}
	}
	
	// 商品基础信息
	.g_base {background: #fff;overflow: hidden;
		.g_bSell {height: 40rpx;line-height: 40rpx;color: #939393;margin: 38rpx 36rpx 0 0;float: right;}
		.g_bPrice {height: 66rpx;line-height: 66rpx;color: #ef5854;font-size: 32rpx;font-weight: bold;padding: 24rpx 0 0 32rpx;box-sizing: content-box;
			& > text {font-size: 48rpx;}
		}
		.g_bShare {width: 124rpx;padding: 12rpx 0 16rpx;display: flex;flex-flow: column;justify-content: center;align-items: center;float: right;
			.g_bsIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;font-size: 32rpx;}
			.g_bsTxt {height: 34rpx;line-height: 34rpx;text-align: center;font-size: 24rpx;margin-top: 6rpx;}
		}
		.g_bName {min-height: 88rpx;line-height: 44rpx;font-size: 32rpx;font-weight: bold;margin: 16rpx 16rpx 16rpx 34rpx;box-sizing: content-box;display: flex;align-items: center;}
	}
	
	// 其他
	.g_it {
		.g_iGroup {margin-top: 16rpx;background: #fff;}
		.g_iItem {min-height: 90rpx;
			&:last-child .g_iCont::after {content: none;}
		}
		.g_iLabel {min-width: 126rpx;height: 90rpx;line-height: 90rpx;padding: 0 12rpx 0 32rpx;float: left;}
		.g_iCont {position: relative;overflow: hidden;
			&::after {content: "";width: 100%;height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
		}
		.g_iIcon {width: 32rpx;height: 32rpx;position: absolute;top: 28rpx;right: 36rpx;}
		.g_iTxt {height: 90rpx;line-height: 90rpx;color: #666;}
		.g_iSelect {padding-bottom: 24rpx;display: flex;
			.g_isItem {width: 60rpx;height: 60rpx;margin-right: 16rpx;border-radius: 8rpx;background: #f6f7fb;}
			.g_isItem.active{border:1px #DD524D solid}
			.g_isLabel {width: 284rpx;height: 60rpx;line-height: 60rpx;text-align: center;color: #939393;font-size: 22rpx;border-radius: 8rpx;background: #f6f7fb;}
		}
	}
	
	// 商品详情
	.g_detail {padding: 48rpx 36rpx 48rpx 32rpx;margin-top: 16rpx;background: #fff;padding-bottom:160rpx;
		.g_dTitle {height: 44rpx;line-height: 44rpx;color: #000;font-size: 32rpx;}
		.g_dBox {margin-top: 24rpx;border: 1px solid rgba(0, 0, 0, .08);}
		.g_dItem {height: 84rpx;border-bottom: 1px solid rgba(0, 0, 0, .08);display: flex;
			&:last-child {border: none;}
		}
		.g_dGroup {width: 50%;display: flex;align-items: center;}
		.g_dLabel {min-width: 146rpx;height: 84rpx;line-height: 84rpx;color: #000;font-size: 24rpx;padding: 0 24rpx;display: flex;justify-content: space-between;align-items: center;}
		.g_dVal {max-height: 68rpx;line-height: 34rpx;color: #787878;font-size: 24rpx;}
	}
	
	// 底部操作栏
	.g_btm {
		.g_bShim {height: 100rpx;box-sizing: content-box;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_bCan {width: 100vw;height: 100rpx;background: #fff;position: fixed;bottom: 0;left: 0;box-sizing: content-box;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_bRight {height: 100%;padding-right: 22rpx;float: right;display: flex;align-items: center;}
		.g_brAdd, .g_brBuy {width: 226rpx;height: 72rpx;line-height: 72rpx;text-align: center;color: #fff;font-weight: bold;border-radius: 10rpx 0 0 10rpx;background: #c3ab7c;}
		.g_brBuy {width: 204rpx;border-radius: 0 10rpx 10rpx 0;background: #333;background: #ccc;}
		.g_bLeft {height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;}
		.g_blItem {width: 88rpx;}
		.g_blIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 40rpx;margin: 0 auto;}
		.g_blTxt {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 22rpx;}
	}
	
	// 弹窗-分享
	.g_share {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1001;
		.g_sBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);}
		.g_sBox {width: 100%;height: 338rpx;border-radius: 16rpx 16rpx 0 0;background: #fff;position: absolute;bottom: 0;left: 0;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_sPoster {position: absolute;bottom: 420rpx;left: 56rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_spCan {width: 640rpx;height: 888rpx;border-radius: 16rpx;background: #fff;box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);}
	}
}

// 弹窗-规格
.Size {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1001;
	.S_bg {width: 100%;height: 100%;background: rgba(0, 0, 0, .8);}
	.S_box {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;flex-flow: column;}
	.S_bCloak {height: 176rpx;}
	.S_bContain {border-radius: 24rpx 24rpx 0 0;background: #fff;position: relative;overflow: hidden;display: flex;flex-flow: column;flex: 1;}
	.S_bClose {width: 104rpx;height: 120rpx;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;
		.S_bcIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;color: #000;font-size: 20rpx;border-radius: 50%;background: #f9f6f3;}
	}
	.S_bInfo {padding: 36rpx 32rpx 20rpx;
		.S_biHead {width: 178rpx;height: 178rpx;margin-right: 24rpx;border-radius: 10rpx;background: #f0f0f0;box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);overflow: hidden;float: left;}
		.S_biCan {overflow: hidden;}
		.S_biFee {height: 60rpx;line-height: 60rpx;color: #e9423e;font-size: 32rpx;font-weight: bold;margin-top: 32rpx;
			& > text {font-size: 44rpx;}
		}
		.S_biTip {height: 40rpx;line-height: 40rpx;color: #e9423e;font-size: 20rpx;margin-top: 10rpx;border-radius: 4rpx;background: #feeff2;display: inline-block;
		  .yprice{margin-left: 0;}
		}
		.S_biRemark {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;margin-top: 10rpx;}
	}
	.S_bConfig {overflow: hidden;flex: 1;
		.S_bcCan {padding: 0 34rpx 146rpx;}
		.S_bcGroup {padding-top: 40rpx;position: relative;
			&:first-child {padding-top: 20rpx;}
		}
		.S_bcTit {height: 40rpx;line-height: 40rpx;font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
		.S_bcChecks {padding-top: 8rpx;}
		.S_bcCheck {height: 42rpx;line-height: 42rpx;color: #939393;font-size: 24rpx;padding: 0 26rpx;margin: 16rpx 16rpx 0 0;border-radius: 22rpx;background: #f5f5f5;display: inline-block;
			&.checked {color: #e9423e;background: #feeff2;}
		}
		.S_bcNums {height: 48rpx;position: absolute;top: 36rpx;right: -22rpx;display: flex;}
		.S_bcNum {width: 72rpx;height: 48rpx;line-height: 48rpx;text-align: center;border-radius: 8rpx;background: #f6f7fb;}
		.S_bcMinus, .S_bcAdd {width: 72rpx;height: 48rpx;position: relative;}
		.S_bcMinus::before, .S_bcAdd::before, .S_bcAdd::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.S_bcAdd::after {width: 4rpx;height: 24rpx;}
	}
	.S_bBtns {height: 86rpx;color: #fff;font-weight: bold;padding: 20rpx 15rpx 0;border-top: 1px solid #f8f6f3;background: #fff;position: absolute;bottom: 0;left: 0;right: 0;box-sizing: content-box;display: flex;justify-content: space-between;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
		.S_bbBtn1, .S_bbBtn2 {width: 294rpx;height: 72rpx;line-height: 72rpx;text-align: center;border-radius: 8rpx;background: #c3ab7c;margin: 0 15rpx;
			&:active {opacity: .88;}
		}
		.S_bbBtn2 {background: #333;}
	}
}
// 固定条
			.into_shopcart {
				width: 100%;
				height: 100rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 301;
				background-color: #fff;
				display: flex;
				align-items: center;
				
				&_box {
					padding: 14rpx 22rpx;
					display: flex;
					
					// 左边小图标
					.into_icon {
						display: flex;
						position: relative;
						
						.icon_store {
							width: 44rpx;
							margin-left: 40rpx;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							
							.store {
								width: 32rpx;
								height: 30rpx;
								
								image {
									width: 100%;
									height: 100%;
								}
							}
							
							text {
								font-size: 22rpx;
								font-weight: 400;
								line-height: 32rpx;
								color: #333333;
								margin-top: 6rpx;
							}
						}
						
						.icon_service {
							width: 44rpx;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							position: absolute;
							right: 6rpx;
							top: 2rpx;
							
							.service {
								width: 34rpx;
								height: 32rpx;
								
								image {
									width: 100%;
									height: 100%;
								}
							}
							
							text {
								font-size: 22rpx;
								font-weight: 400;
								line-height: 32rpx;
								color: #333333;
								margin-top: 6rpx;
							}
						}
						.contact_btn {
							width: 44rpx;
							height: 74rpx;
							margin-left: 46rpx;
						}
						
						button[plain] {
							border: 0 none;
						}
					}
				
					// 右边按钮
					.into_btn {
						width: 430rpx;
						height: 72rpx;
						border-radius: 10rpx;
						margin-left: 82rpx;
						display: flex;
						
						.join_cart {
							width: 226rpx;
							height: 100%;
							text-align: center;
							line-height: 72rpx;
							background-color: #C3AB7C;
							border-radius: 10rpx 0rpx 0rpx 10rpx;
							
							text {
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #FFFFFF;
							}
						}
						
						.into_settlement {
							width: 204rpx;
							height: 100%;
							text-align: center;
							line-height: 72rpx;
							background-color: #333;
							border-radius: 0rpx 10rpx 10rpx 0rpx;
							
							text {
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		
.yprice{
	    margin-left: 30rpx;
	    border: 1px #E9423E solid;
	    display: inline-block;
	    font-size: 18rpx;
	    line-height: 32rpx;
	    padding-right: 10rpx;
	i{
		    display: inline-block;
		    background: #E9423E;
		    color: #fff;
		    font-weight: normal;
		    font-size: 20rpx;
		    line-height: 36rpx;
		    padding: 0 10rpx;
		    margin-right: 5rpx;
	}
	text{
		    font-size: 28rpx;
	}
}
.ledtprei{
	float: left;
	text{
		font-size: 40rpx;
	}
}
.cu-modal{
	    position: fixed;
	    bottom: 0;
	    background: rgba(0,0,0,.5);
	    top: 0;
		display: none;
		 width: 100%;
		 z-index: 500;
}
.show{
	display: block;
}
.bottom-md{
	position: absolute;
	bottom:0;
	background: #fff;
}
.share{
    position: fixed;
    color: #FFFFFF;
    right: 0;
    bottom: 190rpx;
    background: linear-gradient(to bottom right, #FE726B, #FE956B);
    padding: 10rpx 10rpx 10rpx 20rpx;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 0 20upx rgba(0,0,0,.09);
}
.cancel{
  width: 100vw;
  padding: 30rpx;
  text-align: center;
  background: #FFFFFF;
  color: #888;
  font-weight: normal;
  font-size: 30rpx;
}
.md-content{ 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 50rpx 0;
}
.md-content-item{
  margin: 0 90rpx;
  position: relative;
}
.md-content-item image{
  width: 100rpx;
  height: 100rpx;
  margin: auto;
}
.md-content-item view{
  margin-top: 15rpx;
  font-size: 28rpx;
}
.sharebtn{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.repbtn{
	background: #C3AB7C;
	color: #fff;
	display: block;
	width: 100%;
	line-height: 72rpx;
	text-align: center;
	margin: 0 30rpx;
	border-radius: 10rpx;
}
.s_btit{
	font-size: 28rpx;
	font-weight: bold;
	line-height: 88rpx;
}
.S_bc{
	    background: #F5F5F5;
	    color: #939393;
	    padding: 8rpx 30rpx;
	    display: inline-block;
	    margin-right: 30rpx;
	    border-radius: 40rpx;
	    margin-bottom: 30rpx;
}
.S_bc.active{
	color: #E9423E;
	background: #FEEFF2;
}
.md-content-item .s_bIcon{font-size: 72rpx;}
.s_bIcon {width: 112rpx;height: 112rpx;color: #fff;font-size: 140rpx;margin: 60rpx auto 0;border-radius: 50%;background: #8bc37a;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);display: flex;justify-content: center;align-items: center;}
.s_bIcons{background: #ffd425;}
.i_tBtn {width: 102rpx;height: 102rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999;}
.i_tbImg {width: 42rpx;height: 42rpx;margin: 20rpx auto 0;}
.i_tbTxt {width: 100%;height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;position: absolute;top: 58rpx;left: 0;}
</style>